<template>
  <div class="service-msg">
    <!-- 左侧联系人区域 -->
    <div class="left-section">
      <!-- 顶部用户信息 -->
      <div class="top-header">
          <img :src="authStore.user?.avatar || '../../../assets/imgs/login/hint_img.png'" alt="用户头像" class="user-avatar">
        <div class="user-info">
          <div class="user-name"> {{ authStore.user?.username }}</div>
          <div class="user-level">PLUS会员</div>
        </div>
      </div>

      <!-- 搜索框 -->
      <div class="search-box">
        <input type="text" placeholder="搜索最近联系人" />
      </div>

      <!-- 联系人列表 -->
      <div class="contacts-list">
        <div class="contact-item active">
          <img src="../../assets/imgs/service/kefu_avatar.png" alt="京东客服头像" class="contact-avatar" />
          <div class="contact-info">
            <div class="contact-name">

              京东客服
              <span class="official-tag">官方</span>
            </div>
          </div>
        </div>
        <!-- 可以添加更多联系人 -->
      </div>
    </div>

    <!-- 中间聊天区域 -->
    <div class="center-section">
      <!-- 聊天内容区域将在这里展示 -->
      <div class="chat-header">
        <img src="../../assets/imgs/service/kefu_avatar.png" alt="京东客服头像" />
        <div class="chat-title">京东客服</div>
        <!-- <div class="chat-actions">
          <button class="action-btn">
            <i class="icon-phone"></i>
          </button>
          <button class="action-btn">
            <i class="icon-more"></i>
          </button>
        </div> -->
      </div>

      <div class="chat-content">
        <!-- 显示消息列表 -->
        <div v-if="messages.length === 0" class="chat-placeholder">
          请开始与客服对话...
        </div>

        <div class="message" v-for="msg in messages" :key="msg.id"
          :class="{ 'user-message': msg.sender === 'user', 'service-message': msg.sender === 'service' }">
          <div class="message-content">{{ msg.content }}</div>
          <div class="message-time">{{ msg.time }}</div>
        </div>
      </div>

      <div class="chat-input-area">
        <div class="input-tools">
          <button class="tool-btn">
            <i class="icon-emoji"></i>
          </button>
          <button class="tool-btn">
            <i class="icon-image"></i>
          </button>
          <button class="tool-btn">
            <i class="icon-camera"></i>
          </button>
          <button class="tool-btn">
            <i class="icon-file"></i>
          </button>
        </div>
        <textarea class="message-input" placeholder="请输入您想咨询的问题..." v-model="newMessage"
          @keydown.enter.prevent="handleSend"></textarea>
        <button class="send-btn" @click="handleSend">发送</button>
      </div>
    </div>

    <!-- 右侧信息区域 -->
    <div class="right-section">
      <div class="service-info">
        <h3>客服服务</h3>
        <p>工作时间: 09:00-22:00</p>
        <p>服务范围: 订单咨询、售后问题、产品咨询</p>
      </div>
    </div>

  </div>

</template>

<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/stores/auth';
const authStore = useAuthStore();
authStore.initialize();
// 消息列表数据
const messages = ref([
  {
    id: 1,
    content: '您好，请问有什么可以帮助您的？',
    sender: 'service',
    time: '09:30'
  }
]);

// 新消息输入
const newMessage = ref('');

// 发送消息方法
const handleSend = () => {
  // 添加安全检查
  if (newMessage.value && newMessage.value.trim()) {
    messages.value.push({
      id: Date.now(),
      content: newMessage.value.trim(),
      sender: 'user',
      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    });

    // 清空输入框
    newMessage.value = '';

    // 模拟客服回复
    setTimeout(() => {
      messages.value.push({
        id: Date.now() + 1,
        content: '感谢您的咨询，我们会尽快处理您的问题。',
        sender: 'service',
        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
      });
    }, 1000);
  }
};
</script>

<style scoped lang="scss">
.service-msg {
  height: 100vh;
  display: flex;
  overflow: hidden;
  background-color: rgb(46, 47, 61);
  padding: 30px 80px;

  .left-section {
    flex: 0.25;
    background-color: #fff;
    border-right: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;

    .top-header {
      background-color: #e62829;
      color: white;
      padding: 12px 15px;
      display: flex;
      align-items: center;
      gap: 10px;

      .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.8);
      }

      .user-info {
        flex: 1;

        .user-name {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 2px;
        }

        .user-level {
          font-size: 12px;
          opacity: 0.9;
          background-color: rgba(255, 255, 255, 0.2);
          padding: 1px 6px;
          border-radius: 10px;
          display: inline-block;
        }
      }
    }

    .search-box {
      padding: 10px;
      background-color: #f5f5f5;

      input {
        width: 100%;
        padding: 8px 12px;
        border-radius: 10px;
        border: none;
        outline: none;
        font-size: 14px;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

        &::placeholder {
          color: #999;
        }
      }
    }

    .contacts-list {
      flex: 1;
      overflow-y: auto;

      .contact-item {
        padding: 12px 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
          background-color: #f9f9f9;
        }

        &.active {
          background-color: #f0f7ff;
          border-left: 3px solid #1677ff;
        }

        .contact-avatar {
          width: 45px;
          height: 45px;
          border-radius: 8px;
          object-fit: cover;
        }

        .contact-info {
          flex: 1;

          .contact-name {
            font-size: 15px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 6px;

            .official-tag {
              background-color: #e62829;
              color: white;
              font-size: 11px;
              padding: 1px 4px;
              border-radius: 3px;
            }
          }
        }
      }
    }
  }

  .center-section {
    flex: 0.5;
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9;

    .chat-header {
      padding: 12px 15px;
      background-color: #fff;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      align-items: center;

      img {
        width: 50px;
        height: 50px;
      }

      .chat-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }

      .chat-actions {
        display: flex;
        gap: 15px;

        .action-btn {
          background: none;
          border: none;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #666;
          transition: background-color 0.2s;

          &:hover {
            background-color: #f0f0f0;
          }

          .icon-phone::before {
            content: '📞';
          }

          .icon-more::before {
            content: '⋮';
            font-size: 20px;
          }
        }
      }
    }

    .chat-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;

      .chat-placeholder {
        color: #999;
        text-align: center;
        padding: 40px 0;
        font-size: 14px;
      }

      .message {
        margin-bottom: 15px;
        max-width: 70%;
        display: flex;
        flex-direction: column;

        &.user-message {
          margin-left: auto;

          .message-content {
            background-color: #e62829;
            color: white;
            border-radius: 10px 10px 0 10px;
          }
        }

        &.service-message {
          margin-right: auto;

          .message-content {
            background-color: #fff;
            color: #333;
            border-radius: 10px 10px 10px 0;
            border: 1px solid #eee;
          }
        }

        .message-content {
          padding: 10px 15px;
          line-height: 1.5;
        }

        .message-time {
          font-size: 12px;
          color: #999;
          margin-top: 5px;
          align-self: flex-end;
        }
      }
    }

    .chat-input-area {
      padding: 10px 15px;
      background-color: #fff;
      border-top: 1px solid #e5e5e5;

      .input-tools {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;

        .tool-btn {
          background: none;
          border: none;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #666;
          transition: background-color 0.2s;

          &:hover {
            background-color: #f0f0f0;
          }

          .icon-emoji::before {
            content: '😊';
          }

          .icon-image::before {
            content: '🖼️';
          }

          .icon-camera::before {
            content: '📷';
          }

          .icon-file::before {
            content: '📎';
          }
        }
      }

      .message-input {
        width: calc(100% - 80px);
        min-height: 60px;
        max-height: 120px;
        padding: 10px 15px;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        resize: none;
        outline: none;
        font-size: 14px;
        vertical-align: top;
        overflow-y: auto;

        &::placeholder {
          color: #999;
        }
      }

      .send-btn {
        width: 70px;
        height: 60px;
        margin-left: 10px;
        background-color: #e62829;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 15px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
          background-color: #d01f20;
        }

        &:active {
          background-color: #b81a1b;
        }
      }
    }
  }

  .right-section {
    flex: 0.25;
    background-color: #fff;
    border-left: 1px solid #e5e5e5;
    padding: 20px;

    .service-info {
      h3 {
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
      }

      p {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
        line-height: 1.5;
      }
    }
  }
}
</style>
